<div style="height: 100%; display: flex; flex-direction: column">
    <div style="display: flex; gap: 16px">
        <p style="flex: 1 1 0%">Quartz theme:</p>
        <p style="flex: 1 1 0%">Alpine theme:</p>
    </div>
    <div style="flex: 1 1 0%; display: flex; gap: 16px">
        <div style="flex: 1 1 0%" id="grid1"></div>
        <div style="flex: 1 1 0%" id="grid2"></div>
    </div>
    <div style="display: flex; gap: 16px">
        <p style="flex: 1 1 0%">Balham theme (green header):</p>
        <p style="flex: 1 1 0%">Balham theme (red header):</p>
    </div>
    <div style="flex: 1 1 0%; display: flex; gap: 16px">
        <div style="flex: 1 1 0%" id="grid3" class="green-header"></div>
        <div style="flex: 1 1 0%" id="grid4" class="red-header"></div>
    </div>
</div>
